<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>急速文件 - 文件管理器首页</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
    <div class="iphone-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <div class="left">9:41</div>
            <div class="center"></div>
            <div class="right">
                <i class="fas fa-signal" style="margin-right: 5px;"></i>
                <i class="fas fa-wifi" style="margin-right: 5px;"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>
        
        <!-- 导航栏 -->
        <div class="nav-bar">
            <div class="nav-bar-title">文件管理器</div>
            <div>
                <i class="fas fa-bell" style="margin-right: 12px;"></i>
                <i class="fas fa-cloud-upload-alt"></i>
            </div>
        </div>
        
        <!-- 应用内容区 -->
        <div class="app-content">
            <!-- 存储信息 -->
            <div style="padding: 16px;">
                <div class="section-title">存储空间</div>
                <div class="storage-bar">
                    <div class="progress-bar">
                        <div class="progress-bar-fill" style="width: 45%;"></div>
                    </div>
                    <div class="storage-info">
                        <span>已用: 116GB</span>
                        <span>总共: 256GB</span>
                    </div>
                </div>
            </div>
            
            <!-- 快速访问 -->
            <div class="section-title">快速访问</div>
            <div class="quick-access">
                <div class="quick-access-item">
                    <div class="quick-access-icon" style="background-color: #E1F5FE;">
                        <i class="fas fa-image" style="color: #03A9F4;"></i>
                    </div>
                    <div class="quick-access-label">照片</div>
                </div>
                <div class="quick-access-item">
                    <div class="quick-access-icon" style="background-color: #E8F5E9;">
                        <i class="fas fa-file-video" style="color: #4CAF50;"></i>
                    </div>
                    <div class="quick-access-label">视频</div>
                </div>
                <div class="quick-access-item">
                    <div class="quick-access-icon" style="background-color: #FFF3E0;">
                        <i class="fas fa-music" style="color: #FF9800;"></i>
                    </div>
                    <div class="quick-access-label">音乐</div>
                </div>
                <div class="quick-access-item">
                    <div class="quick-access-icon" style="background-color: #E8EAF6;">
                        <i class="fas fa-file-alt" style="color: #3F51B5;"></i>
                    </div>
                    <div class="quick-access-label">文档</div>
                </div>
            </div>
            
            <!-- 最近文件 -->
            <div style="margin-top: 24px;">
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 0 16px;">
                    <div class="section-title" style="margin: 0;">最近文件</div>
                    <a href="#" style="color: var(--primary-color); font-size: 14px;">查看全部</a>
                </div>
                
                <div style="margin-top: 10px;">
                    <div class="list-item">
                        <div class="list-item-icon" style="background-color: #E1F5FE;">
                            <i class="fas fa-image" style="color: #03A9F4;"></i>
                        </div>
                        <div class="list-item-content">
                            <div class="list-item-title">家庭照片.jpg</div>
                            <div class="list-item-subtitle">2.5 MB • 刚刚</div>
                        </div>
                        <i class="fas fa-ellipsis-vertical" style="color: var(--dark-gray);"></i>
                    </div>
                    
                    <div class="list-item">
                        <div class="list-item-icon" style="background-color: #E8EAF6;">
                            <i class="fas fa-file-word" style="color: #3F51B5;"></i>
                        </div>
                        <div class="list-item-content">
                            <div class="list-item-title">工作报告.docx</div>
                            <div class="list-item-subtitle">1.2 MB • 2小时前</div>
                        </div>
                        <i class="fas fa-ellipsis-vertical" style="color: var(--dark-gray);"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="tab-bar">
            <div class="tab-item active">
                <i class="fas fa-home tab-icon"></i>
                <span class="tab-label">首页</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-folder tab-icon"></i>
                <span class="tab-label">文件</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-image tab-icon"></i>
                <span class="tab-label">相册</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-cog tab-icon"></i>
                <span class="tab-label">设置</span>
            </div>
        </div>
    </div>
</body>
</html> 